<template>
  <view class="arrow" :class="isRight && 'right'" @tap="$emit('click')" />
</template>

<script lang="ts" setup>
// #region Props
defineProps<{ isRight?: boolean }>()
// #endregion
// #region Emits
defineEmits(['click'])
// #endregion
// #region Hooks
// #endregion
// #region Computed
// #endregion
// #region Watch
// #endregion
// #region Event
// #endregion
// #region Function
// #endregion
// #region Life Cycle
// #endregion
// #region Expose
// #endregion
</script>

<style lang="scss" scoped>
.arrow {
  width: 8px;
  height: 8px;
  border-top: 2px solid rgba(0, 0, 0, 0.5);
  border-right: 2px solid rgba(0, 0, 0, 0.5);
  border-radius: 2px;
  transform: rotate(225deg);
  &.right {
    transform: rotate(45deg);
  }
  &:hover {
    border-top: 2px solid var(--main-light-color);
    border-right: 2px solid var(--main-light-color);
  }
}
</style>
